<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
    <link th:href="@{'/admin/assets/js/plugins/dropzonejs/dist/min/dropzone.min.css'}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{'/admin/assets/js/plugins/dropzonejs/dist/min/basic.min.css'}">
</head>
<body>

<div class="content">
    <div class="block block-fx-shadow">
        <div class="block-content">
            <div class="row justify-content-center py-20">
                <div class="col-xl-6">
                    <form id="saveForm" th:action="@{${baseUrl} + '/add.json'}" class="js-validation-bootstrap" method="post">
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="name">名称 <span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="name" name="name" placeholder="名称" data-bv-notempty="true" data-bv-notempty-message="名称不能为空">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="state">状态 <span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <select class="js-select2 form-control" id="state" name="state" style="width: 100%;" data-placeholder="请选择状态" >
                                    <option value="" disabled>请选择状态</option>
                                    <option value="1">开启</option>
                                    <option value="0">关闭</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="sort">排序 <span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="number" class="form-control" id="sort" name="sort" placeholder="排序" data-bv-notempty="true" data-bv-notempty-message="排序不能为空">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="remark">描述 </label>
                            <div class="col-lg-10">
                                <textarea id="remark" name="remark" class="form-control" aria-label="With textarea" style="resize: none" placeholder="描述"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2 col-form-label" for="coverUrl"> 封面</label>
                            <div class="col-lg-10">
                                <img id="coverBox" src="/admin/assets/custom/images/post/default_post.jpg" width="180" height="135" style="display: inline-block;margin-bottom: 10px">
                                <input type="text" id="coverUrl" name="coverUrl" class="form-control" style="display: inline-block;width: 80%" placeholder="封面">
                                <span id="btnContainer"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-12 text-center">
                                <button type="reset" class="btn btn-secondary">重置</button>
                                <button type="submit" class="btn btn-primary" id="submitBtn">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<div th:replace="~{admin/common :: common-script}"></div>
<script th:src="@{'/admin/assets/js/plugins/dropzonejs/dist/min/dropzone.min.js'}"></script>
<script type="text/javascript" th:inline="javascript">

    let CategoryManager = {
        init: function () {
            CategoryManager.bindEvent();
            CategoryManager.initUploadEvent();
        },
        bindEvent: function () {
            $("#coverUrl").on("blur", function() {
                let resourceUrl = $(this).val() || "/admin/assets/custom/images/post/default_post.jpg";
                $("#coverBox").attr("src", resourceUrl);
            });

            $("#submitBtn").on("click", function () {
                $.hexo.action.save("saveForm");
            });
        },
        initUploadEvent: function () {
            $("#btnContainer").html('<button id="uploadBtn" type="button" class="btn btn-primary" style="width: 19%">上传</button>');
            Dropzone.autoDiscover = false;
            $("#uploadBtn").dropzone({
                method: "POST",
                url: "/admin/file/upload.json",
                addRemoveLinks: true,
                maxFiles: 1,
                maxFilesize: 5,
                uploadMultiple: false,
                previewsContainer: false,
                dictResponseError: '文件上传失败',
                acceptedFiles: ".jpg, .jpeg,.png",
                dictFileTooBig: "最大支持5MB文件上传",
                init: function () {
                    this.on("error", function (data, message) {
                        console.error(message);
                        if (typeof message == "string") {
                            $.hexo.modal.tip("上传失败: " + message, "error");
                        } else{
                            $.hexo.modal.tip("上传失败: " + message.error, "error");
                        }
                        CategoryManager.initUploadEvent();
                    });

                    this.on("success", function (data, resp) {
                        if (resp.success) {
                            $("#coverUrl").val(resp.data);
                            $("#coverBox").attr("src", resp.data);
                            $.hexo.modal.tip("封面上传成功");
                        }
                        CategoryManager.initUploadEvent();
                    });
                }
            });
        }
    };

    CategoryManager.init();
</script>
</body>
</html>